<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="/res/css/amazeui.min.css" />
		<link rel="stylesheet" href="/res/css/admin.css" />
		<style>
			.add-input {
				border: 1px solid #ccc;
				padding: 7px 0px;
				border-radius: 3px;
				padding-left:5px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
				box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
				-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
				-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
				transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
			}
			.add-input:focus{
				border-color: #66afe9;
				outline: 0;
				-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
				box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
			}

		</style>
	</head>

	<body>
		<div class="admin-content-body">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">添加问卷题目信息</strong><small></small></div>
			</div>
			<hr>
			<div class="am-g">
				<div class="am-u-sm-12 am-u-md-6">
					<div class="am-btn-toolbar">
						<div class="am-btn-group am-btn-group-xs">
							<button type="button"
									class="am-btn am-btn-success"
									id="doc-prompt-toggle"><span class="am-icon-plus"></span> 新增</button>
						</div>
					</div>
				</div>

				<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
					<div class="am-modal-dialog">
						<div class="am-modal-hd"><b>添加题目信息</b></div>
						<div class="am-modal-bd">
							选择您要添加的题目类型<br/>
							<input type="radio" name="sub_type" id="red" value="选择" checked="checked">&nbsp;选择 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="sub_type" id="blue" value="填写">&nbsp;填写<br/>
							<div class="sub_content">

								<table id="choice_table" class="am-table am-table-striped am-table-hover table-main">
									<thead>
										<tr>
											<th>题目</th>
											<th>选项(以|分割,填空题无需填写)</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><input type="text" class="add-input" id="addContent" /></td>
											<td><input type="text" class="add-input" id="addAnswer" /></td>
										</tr>
									</tbody>
								</table>

							</div>
						</div>
						<div class="am-modal-footer">
							<span class="am-modal-btn" data-am-modal-cancel>取消</span>
							<span class="am-modal-btn" data-am-modal-confirm>提交</span>
						</div>
					</div>
				</div>

				<div class="am-u-sm-12">
					<form class="am-form">
						<input type="hidden" name="count" id="count" th:value="${count}" />
						<input type="hidden" name="qId" id="qId" th:value="${qn.id}" />
						<table id="subject_table" class="am-table am-table-striped am-table-hover table-main">
							<caption th:text="${qn.name}"></caption>
							<thead>
								<tr>
									<th>题号</th>
									<th>类型</th>
									<th>题目内容</th>
									<th>题目选项</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="subject_table_body">
								<tr th:each="item : ${ qn.subjects }">
									<td th:text="${item.num}"></td>
									<td th:text="${item.type}"></td>
									<td th:text="${item.content}"></td>
									<td th:text="${item.option}"></td>
									<td><button class="btn-danger" th:onclick="del([[${item.id}]])"><span class="am-icon-trash-o"></span> 删除</button></td>
								</tr>
							</tbody>
						</table>
						<button type="button" onclick="addSubject()" class="am-btn am-btn-success" >提交</button>
					</form>
				</div>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
	<script>
		var choiceNum = 0;
        $(function() {
            $('#doc-prompt-toggle').on('click', function() {
                $('#my-prompt').modal({
                    relatedTarget: this,
                    onConfirm: function(e) {
						var content = $("#addContent").val();
						var answer = $("#addAnswer").val();
						var sub_type = $("input[name='sub_type']:checked").val();

						if(content==null||content==''||content.trim().length==0){
							alert("请输入题目后提交！！");
							return;
						}else if(sub_type=='选择'&&(answer==null||answer==''||answer.trim().length==0)){
							alert("请输入选项后提交！！");
							return;
						}

						addChoice(sub_type,content,answer);
                        $("#addContent").val("");
                        $("#addAnswer").val("");
                    },
                    onCancel: function(e) {

                    }
                });
            });
        });
        function addChoice(sub_type,content,answer) {
            var rows = document.getElementById('subject_table').rows.length;

			$("#subject_table").append("<tr>\n" +
                    "        <td>"+rows+"</td>" +
                	"        <td>"+sub_type+"</td>" +
                    "        <td>"+content+"</td>" +
                	"        <td>"+answer+"</td>" +
                	"        <td><button class='btn-danger' onclick='delTr(this)' ><span class='am-icon-trash-o'></span> 删除</button></td>" +
                    "     </tr>");
			choiceNum++;
        }

        function delTr(obj) {
            $(obj).closest('tr').remove();
        }
        
        function addSubject() {
			var qId = $("#qId").val();
            var count = parseInt($("#count").val());

            console.log("已存在的："+count);

            var tb = document.getElementById('subject_table');
            var rows = tb.rows;
            console.log('一共行数：'+rows.length);
            var jsonArry = [];
            var words = ['A','B','C','D','E','F','G','H','I','J','K'];
            for(var i = count+1; i<rows.length; i++ ){
                var tno = rows[i].cells[0].innerHTML;
                var type = rows[i].cells[1].innerHTML;
                var content = rows[i].cells[2].innerHTML;
                var option = rows[i].cells[3].innerHTML;

				var optionJson = {};

				if(type=='选择'){
                    var optionArr = option.split('|');
                    for(var j=0; j<optionArr.length; j++){
                        optionJson[words[j]] = optionArr[j];
                    }
				}

				var job = {};
				job.qnId = qId;
				job.num = tno;
                job.content = content;
                job.type = type;
                job.option = JSON.stringify(optionJson);

				jsonArry.push(job);

            }
            console.log(JSON.stringify(jsonArry));
			if(jsonArry.length==0){
			    alert("没有新增的数据！");
			    return;
			}
             $.ajax({
                 type: "post",
                 url: "/questionnaire/pc/addSubject",
                 data: JSON.stringify(jsonArry),
                 dataType: 'json',
                 contentType: "application/json; charset=utf-8",
                 success: function(result) {
                     console.log(JSON.stringify(result));
                     location.reload();
                 }
             });

        }

        function del(id) {
            if(confirm("是否确认删除？")){
                window.location.href = '/questionnaire/pc/delSubject?id='+id;
                window.event.returnValue=false;
            }else {
                alert("已取消删除");
            }
        }
        
	</script>
</html>